// out:../css/
*{
    box-sizing: border-box;
}
.flex{
    display: flex;
    width: 1000px;
    justify-content: space-between;
    .box {
        position: relative;
        width: 300px;
        height: 212px;
        overflow: hidden;
        img {
            width: 300px;
            height: 210px;
        }
        .mask {
            width: 300px;
            height: 170px;
            align-content: end;
          position: absolute;
          bottom: 0;
          left: 0px;
          z-index: 2;
          color: #fff;
          font-size: 20px;
          font-weight: 700;
        //   background-color: pink;
          padding: 50px 10px 50px;
          .title{
            font-size: 15px;
            // background-color: yellow;
          }
          .des{
            font-size: 20px;
            width: 270px;
            // background-color: red;
          }
          
        }
        p{
            justify-content: start;
            align-items: center;
            width: 65px;
            margin: 10px;
            .more{
                font-size: 12px;
                width: 270px;
                color: #fff;
            }
            .iconfont{
                font-size: 14px;
                color: red;
            }
          }
    }
    
}
.box:hover .mask{
    background-image: linear-gradient(180deg,transparent,rgba(0, 0, 0, .5) );
} 
.box:hover p{
    transform: translate(0,-50px);
} 